<template>
  <div class="p-15px">
    KoiDrawer抽屉组件封装使用<br /><br />
    <el-button type="primary" plain @click="addButton">添加示例</el-button>
    <KoiDrawer
      ref="koiDrawerRef"
      title="KoiDrawer组件示例"
      @koiConfirm="koiConfirm"
      @koiCancel="koiCancel"
    >
      <template #content>
        <el-form ref="form" label-width="80px">
          <el-row>
            <el-col :span="24">
              <el-form-item label="YU ADMIN">
                <el-input />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="YU ADMIN">
                <el-input />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="YU ADMIN">
                <el-input />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>
    </KoiDrawer>
  </div>
</template>

<script setup lang="ts">
// @ts-ignore
import { koiMsgWarning } from "@/utils/koi.ts";
import { ref } from "vue";
const koiDrawerRef = ref();
// 添加
const addButton = () => {
  koiDrawerRef.value.koiOpen();
};

// 确定
const koiConfirm = () => {
  koiMsgWarning("朕让你提交了么？信不信锤你！");
};

// 取消
const koiCancel = () => {
  koiDrawerRef.value.koiClose();
};
</script>

<style scoped></style>
